<template>
  <base-window :title="$t('common.task.button.approve')" size="large" :show.sync="visible" unique="false" width="700px" class="task-approve-dialog">
    <div class="base-modal-content">
      <h2 class="approve-source">{{ $t('projectManage.projectType.approvalSource') }}</h2>
      <div class="form-view-row">
        <label>{{$t('task.detail.components.source')}}</label>
        <div class="form-view-row-content">
          <template v-if="approve.source == 'task'">{{$t('common.base.task')}}</template>
          <template v-else-if="approve.source == 'event'">{{$t('common.base.event')}}</template>
          <template v-else-if="approve.source == 'project'">{{$t('projectManage.setting.projectName')}}</template>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('common.base.serialNumber')}}</label>
        <div class="form-view-row-content">{{ approve.objNo }}</div>
      </div>
      <div class="form-view-row">
        <label>{{$t('common.base.type')}}</label>
        <div class="form-view-row-content">{{ approve.typeName }}</div>
      </div>
      <div class="form-view-row">
        <label>{{$t('common.base.node')}}</label>
        <div class="form-view-row-content">{{ getActionLabel(approve.action) }}</div>
      </div>

      <div v-if="showApproveReason" class="approve-reason-new">
        <div class="form-view-row">
          <label class="reason-label">{{getActionLabel(approve.action)}}{{$t('common.base.reason')}}</label>
          <div class="form-view-row-content">{{ approve.reason }}</div>
        </div>
        <div class="form-view-row">
          <label class="reason-label">{{$t('task.detailReason')}}</label>
          <div class="form-view-row-content">{{ approve.detailedReasons}}</div>
        </div>
      </div>
      <template v-if="approve.action == '指派' || approve.action == '转派'">
        <div class="form-view-row">
          <label>{{$t('task.executor')}}</label>
          <template v-if="isOpenData && otherInfo.executor && otherInfo.executor.staffId">
            <open-data type="userName" :openid="otherInfo.executor.staffId"></open-data>
          </template>
          <template v-else>
            <template v-if="otherInfo.executor && otherInfo.executor.displayName">
              {{otherInfo.executor.displayName || ''}}
            </template>
          </template>
        </div>
        <div class="form-view-row">
          <label>{{$t('task.synergies')}}</label>
          <template v-if="isOpenData && otherInfo.synergies && otherInfo.synergies.length">
            <open-data type="userName" :openid="item.staffId" v-for="item in otherInfo.synergies" :key="item.staffId"></open-data>
          </template>
          <template v-else>
            {{ otherInfo.synergies | formatSynergiesNames}}
          </template>
        </div>
      </template>
      <div class="form-view-row" v-if="approve.id && approveContentStr">
        <label>{{$t('task.content')}}</label>
        <div v-if="approve.action == '完成'" @click="goApproveDetail" class="form-view-row-content go-approve-detail">{{ approveContentStr }}</div>
        <div v-else class="form-view-row-content">{{ approveContentStr }}</div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.promoter')}}</label>
        <div class="form-view-row-content">
          <template v-if="isOpenData && approve.proposerStaffId">
            <open-data type="userName" :openid="approve.proposerStaffId"></open-data>
          </template>
          <template v-else>
            {{ approve.proposerName }}
          </template>
        </div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.promoteTime')}}</label>
        <div class="form-view-row-content">{{ approve.createTime | fmt_datetime }}</div>
      </div>
      <div class="form-view-row">
        <label>{{$t('task.promoteRemark')}}</label>
        <div class="form-view-row-content">{{ atTextToHtml1(approve.applyRemark || approve.approveRemark) }}</div>
      </div>
      <div class="dividing-line"></div>
      <!-- 高级审批开始 -->
      <template v-if="fromVip">
        <el-steps class="approve-steps" direction="vertical">
          <!--S 已经审批的步骤 -->
          <el-step class="approve-step-item" v-for="(item, idx) in haveApproveList" :key="idx">
            <el-row slot="title" type="flex" justify="space-between">
              <h2 class="pass">
                {{  setNodeNameLanguage(item) }}
              </h2>
              <p style="color: rgba(0, 0, 0, 0.45)">{{item.completeTime | fmt_datetime}}</p>
            </el-row>
            <template v-if="item.operateCode">
              <!-- 非自动审批的展示 -->
              <div class="approve-step-item-desc" slot="description" v-for="(ele, index) in item.taskLogVOList" :key="index">
                <template v-if="isOpenData && ele.user && ele.user.staffId">
                  <open-data type="userName" :openid="ele.user.staffId"></open-data>
                </template>
                <template v-else>
                  {{ getApproversLabel(ele.user.userName)}}
                </template>

                <span :class="[item.operateCode === 6 ? 'agree' : 'refuse']">{{ item.operate }}</span>

                <base-file-item :Source="ele.attached" v-for="file in ele.attached" :key="file.id" :file="file" size="small" readonly></base-file-item>        
                <p v-if="ele.approveMessage">{{$t('task.detail.components.approveSuggestion')}}： <biz-comment-html :html="ele.approveMessage"></biz-comment-html></p>
                <div type="flex">
                  <span v-if="ele.sign">
                    <el-image :src="ele.sign" fit="fill" style="height:100px;"></el-image>
                  </span>
                </div>
              </div>
            </template>
          </el-step>
          <!--E 已经审批的步骤 -->
          <!--S 当前审批的步骤 -->
          <el-step class="approve-step-item" status="process">
            <el-row slot="title" type="flex" justify="space-between">
              <h2 v-if="currentApproveObj.data && currentApproveObj.data.name">{{ setNameLanguage(currentApproveObj.data) }}</h2>
            </el-row>
            <div class="approve-step-item-desc" slot="description">
              <template v-if="(currentApproveObj.data && currentApproveObj.data.attribute && currentApproveObj.data.attribute.candidate)">
                <span>
                  {{ currentApproveObj.data.attribute.candidate | vipApproveNames }}
                </span>
              </template>
              <template v-else>
                {{$t('task.tip.approveTip3')}}
              </template>
              <span style="color: #8C8C8C;">（{{$t('common.task.approveStatus.approve')}}）</span>
            </div>
          </el-step>
          <!--E 当前审批的步骤 -->
          <!--S 未到审批的步骤 -->
          <el-step class="approve-step-item" v-for="(item) in unHaveApproveList" :key="item.id" status="wait">
            <el-row slot="title" type="flex" justify="space-between">
              <h2 v-if="item.data && item.data.name">{{ setNameLanguage(item.data) }}</h2>
            </el-row>
            <div class="approve-step-item-desc" slot="description">
              <template v-if="(item.data && item.data.attribute && item.data.attribute.candidate)">
                <span>
                  {{ item.data.attribute.candidate | vipApproveNames }}
                </span>
              </template>
              <template v-else>
                {{$t('task.tip.approveTip3')}}
              </template>
              <span style="color: #8C8C8C;">（{{$t('common.task.approveStatus.pendingApproval')}}）</span>
            </div>
          </el-step>
          <!--E 未到审批的步骤 -->
        </el-steps>
      </template>
      <!-- 高级审批结束 -->

      <template v-else>
        <!--S 一级审批 -->
        <template v-if="configLevel === 1">
          <el-steps class="approve-steps" direction="vertical">
            <!--S 当前审批的步骤 -->
            <el-step class="approve-step-item">
              <i class="signature stepCicle" slot="icon"></i>
              <el-row slot="title" type="flex" justify="space-between">
                <h2>{{ $t('common.base.approveLevel', { data1: formatNumToCN(approve.approverResult && approve.approverResult.length + 1) }) }}  </h2>
              </el-row>
              <div class="approve-step-item-desc" slot="description">
                <template v-if="isOpenData && approve.approvers && approve.approvers.length">
                  <open-data v-for="item in approve.approvers" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
                </template>
                <template v-else>
                  {{ approve.approvers | formatApproveNames }} <span style="color: #8C8C8C;">（{{ $t('common.task.approveStatus.approve') }}）</span>
                </template>
              </div>
            </el-step>
            <!--E 当前审批的步骤 -->
          </el-steps>
        </template>
        <!--E 一级审批 -->
        <!-- S 多级审批 -->
        <el-steps v-else class="approve-steps" direction="vertical">
          <!--S 已经审批的步骤 -->
          <el-step  icon="el-icon-edit"  v-for="(item, idx) in approve.approverResult" :key="idx" >
            <i class="timeOver stepCicle" slot="icon"></i>
            <el-row slot="title" type="flex" justify="space-between">
              <h2 class="pass">
                {{$t('common.base.approveLevel', {data1: formatNumToCN(idx + 1)})}} </span>
              </h2>
              <p style="color: rgba(0, 0, 0, 0.45)">{{item.completeTime | fmt_hourMinuteSecond}}</p>
            </el-row>
            <div slot="description">
              <div class="approve-step-item-desc">
                <template v-if="isOpenData && item.approverStaffId">
                <open-data type="userName" :openid="item.approverStaffId"></open-data>
              </template>
              <template v-else>
                {{ getApproversLabel(item.approverName) }} <span style="color:#07C160">（{{$t('common.base.usualStatus.agree')}}）</span>
              </template>
              <p>{{$t('task.detail.components.approveSuggestion')}}： {{atTextToHtml1(item.approveRemark)}}</p>
              </div>
              <div type="flex">
                <span v-if="item.sign">
                  <el-image :src="item.sign" fit="fill" style="height:100px;"></el-image>
                </span>
              </div>
            </div>
          </el-step>
          <!--E 已经审批的步骤 -->
          <!--S 当前审批的步骤 -->
          <el-step class="approve-step-item">
            <i class="signature stepCicle" slot="icon"></i>
            <el-row slot="title" type="flex" justify="space-between">
              <h2>{{$t('common.base.approveLevel', {data1: formatNumToCN(approve.approverResult.length + 1)})}}  </h2>
            </el-row>
            <div class="approve-step-item-desc" slot="description">
              <template v-if="isOpenData && approve.approvers && approve.approvers.length">
                <open-data v-for="item in approve.approvers" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
              </template>
              <template v-else>
                {{ approve.approvers | formatApproveNames}} <span style="color: #8C8C8C;">（{{$t('common.task.approveStatus.approve')}}）</span>
              </template>
              
            </div>
          </el-step>
          <!--E 当前审批的步骤 -->
          <!--S 未到审批的步骤 -->
          <el-step class="approve-step-item" v-for="(item, idx) in approve.multiApprover" :key="idx">
            <i class="comingSoon stepCicle" slot="icon"></i>
            <el-row slot="title" type="flex" justify="space-between">
              <h2>{{$t('common.base.approveLevel', {data1: formatNumToCN(approve.approverResult.length + idx + 2)})}}</h2>
            </el-row>
            <div class="approve-step-item-desc" slot="description">
              <template v-if="isOpenData && item && item.length">
                <open-data v-for="approve in item" :key="approve.staffId" type="userName" :openid="approve.staffId"></open-data>
              </template>
              <template v-else>
                {{ item | formatApproveNames}}
              </template>
            </div>
          </el-step>
          <!--E 未到审批的步骤 -->
        </el-steps>
        <!-- E 多级审批 -->
      </template>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="dialog-footer-left"></div>
      <div class="dialog-footer-right">
        <template v-if="fromVip">
          <el-button 
            type="primary" 
            plain 
            :disabled="pending"
            @click="openTaskAdvancedApprove()"
          >
            {{ vipBtnSetting.cnName }}
          </el-button>
        </template>
        <template v-else>
           <el-button type="danger" plain @click="openSignatures(false)">{{ $t('common.base.refuse') }}</el-button>
           <el-button type="primary" @click="openSignatures(true)">{{ $t('common.base.agree') }}</el-button>
        </template>
      </div>
    </div>
    <!-- 新增审批签名 -->
    <task-approve-signature 
      ref="approveSignature"
      v-bind="$attrs"
      :approveId="approveId"
      :currLevel="currLevel"
      :approveUserRemark="approveUserRemark"
      :taskId="taskId"
      :signaturesApprove="approve">
    </task-approve-signature>
    <!-- 新增审批签名 -->
    <!-- 高级审批 -->
    <task-advanced-approve
      ref="taskAdvancedApprove"
      :vip-btn-setting="vipBtnSetting"
      :approve-button-text="approveButtonText"
      :approve-attachments="approveAttachments"
      :signatures-approve="approve"
      :approve-info-params="approveInfoParams"
      :head="head"
      :approve="approve"
      @upload="upload"
      @remove="remove"
      @submit="submit"
    >
    </task-advanced-approve>
    <!-- 高级审批 -->
  </base-window>
</template>

<script>
import TaskApproveSignature from "./TaskApproveSignature.vue"
import TaskAdvancedApprove from './TaskAdvancedApprove.vue'
import { isOpenData } from '@src/util/platform'
/* enum */ 
import { ApproveActionLabelEnum, TaskApproversLabelEnum } from '@model/enum/LabelEnum.ts'
/* api */
import * as TaskApi from '@src/api/TaskApi.ts';
import { getRootWindow } from '@src/util/dom'
import { getOssUrl } from '@src/util/assets'
const defaultAvatar = getOssUrl('/avatar.png')
import {enCodeAtText, getReceivers, atTextToHtml1} from '@src/util/atText'
import { cutAtTextContent } from 'pub-bbx-utils'
import { useTenantId, useRootUser } from '@hooks/useRootWindow.ts';
import i18n from '@src/locales';
import { getSortAfterNodes} from '@src/util/approve'

import { approveSubmit } from '@src/api/ProjectManage.ts';

const rootWindow = getRootWindow(window)
export default {
  name: 'task-approve-dialog',
  props: {
    approveId: {
      type: String,
      default: '',
    },
    taskId: {
      type: String,
      default: '',
    },
    approveUserRemark:{
      type: Boolean,
      default: false,
    },
    // 当前模块的类型
    moduleType: {
      type: String,
      default: '',
    },
    // 项目管理的数据
    projectApproveData: {
      type: Object,
      default:(() => {})
    },
    customNodeTitle: {
      type: String,
      default: '',
    },
    // 自定义节点id
    customNodeId: {
      type: String,
      default: '',
    }
  },
  components:{
    TaskApproveSignature,
    TaskAdvancedApprove,
  },
  data: () => {
    return {
      isOpenData,
      visible: false,
      showSignature:false,
      pending: false,
      approve: {},
      signaturesApprove: {},

      approveRemark: '',
      approveAttachments: [], // 高级审批附件

      currLevel: 1, // 当前审批层级
      approveContentStr: '',
      otherInfo: {},
      atUsers:[],
      atTextToHtml1,
      fromVip: false,

      vipBtnSetting: {}, // 高级审批按钮设置
      currentApproveObj: {}, // 正在审批的
      haveApproveList: [], // 已经审批过的
      unHaveApproveList: [], // 未审批的
      btnType: '',
      approveInfoParams: {},
      vipJson: {}, // 高级审批的attribute 字段
    };
  },
  computed: {
    approveButtonText() {
      return this.btnType === 'agree' ? i18n.t('common.base.agree') : i18n.t('common.base.refuse');
    },
    configLevel() {
      return this.approve.otherInfo && this.approve.otherInfo.params && this.approve.otherInfo.params.level || 1;
    },
    showApproveReason() {
      return ['暂停', '取消', '转派'].includes(this.approve?.action)
    },
  },
  filters: {
    vipApproveNames(approvers) {
      return approvers.map(item => item.name).join(',')
    },
    formatApproveNames(approvers) {
      if (!approvers) return
      return approvers.map(item => item.displayName).join(',') || i18n.t('task.tip.approveTip3');
    },
    formatSynergiesNames(synergies) {
      if(synergies) return synergies.map(item => item.displayName).join(',') || '';
      return ''  
    }
  },
  mounted () {
    this.approveContentStr = this.approveContent()
    this.$nextTick(()=> {
      if(rootWindow.WWOpenData) {
        rootWindow.WWOpenData.bindAll(document.querySelectorAll('ww-open-data'));
      }
    })
  },
  methods: {
    openSignatures(signatures) {
      this.$refs.approveSignature.openDialog(signatures)
    },
    // 已经审批的
    setNodeNameLanguage(data) {
      if (!data.nameLanguage) return data.nodeName
      let laEnv = this.$i18n.locale ;
      return data.nameLanguage[laEnv]
    },
    // 未审批和正在审批的
    setNameLanguage(data) {
      if (!data.attribute.nameLanguage) return data.name
      let laEnv = this.$i18n.locale ;
      return data.attribute.nameLanguage[laEnv]
    },
    upload(queue){
      this.$set(this, 'approveAttachments', queue)
    },

    async remove(file){
      if(!await this.$platform.confirm(this.$t('common.form.preview.file.deleteFileTips'))) return;

      let index = -1;
      for(let i = 0; i < this.approve.attachments.length; i++){
        let f = this.approve.attachments[i];
        if(f.url == file.url){
          index = i;
          break;
        }
      }
      if(index >= 0) this.approve.attachments.splice(index, 1);
    },

    // 获取审批人多语言label
    getApproversLabel(name) {
      return TaskApproversLabelEnum[name] || name
    },
    goApproveDetail() {
      window.location.href = `${this.$resourcePrefix}/task/view/${this.taskId}?isToReceiptView=true`
    },
    formatNumToCN(num) {
      let changeNum = [this.$t('common.base.number0'), this.$t('common.base.number1'), this.$t('common.base.number2'), this.$t('common.base.number3'), this.$t('common.base.number4'), this.$t('common.base.number5'), this.$t('common.base.number6'), this.$t('common.base.number7'), this.$t('common.base.number8'), this.$t('common.base.number9')];
      return changeNum[num];
    },
    reset() {
      this.approve = {};
    },
    openDialog(btnType) {

      this.btnType = btnType
      if (this.pending) return;
      this.pending = true;

      // 重置
      this.reset();
      TaskApi.getApprove({ id: this.approveId })
        .then((res) => {
          if (res.status == 0) {
            if (res.data?.processorInstanceId) {
              this.fromVip = true
              this.approve = res.data;
              this.otherInfo = this.approve?.otherInfo?.params ?? {};
              this.getVipData(btnType)
            } else {
              this.visible = true;
              this.approve = res.data;
              this.otherInfo = this.approve.otherInfo.params;
              this.currLevel = res.data.approverLevel;
            }
          } else {
            this.$platform.alert(res.message);
          }
        })
        .catch((err) => console.log(err))
        .finally(() => {
          this.pending = false;
        })
    },

    async getVipData(btnType) {
      let res = {}
      if (this.moduleType === 'project') {
        res = this.projectApproveData
        res.result = res.data
      } else {
        let params = {approveId: this.approveId}
        if(this.customNodeId) {
          params.nodeTaskBizId = this.customNodeId
        }
        res = await TaskApi.getApproveLoad(params)
      }
      if (res.success) {
        const { approveInfo, logInfo, attribute } = res.result || {}
        this.approveInfoParams = approveInfo || []
        this.vipJson = JSON.parse(attribute)
        if (this.vipJson?.cells) {
          let filterArr = getSortAfterNodes(this.vipJson.cells)
          const { currentNodeTemplateId, buttons } = approveInfo || []
          let approveArr = filterArr.filter((item => item.shape === 'approve-node'))
          // 已经审批过的，需要过滤掉taskLogVOList为空的数据
          this.haveApproveList = (logInfo || []).filter(log => log.taskLogVOList && log.taskLogVOList.length)
          // 当前审批的节点

          approveArr.forEach((item) => {
            this.haveApproveList.forEach((ele) => {
              if (item.id === ele.nodeTemplateId) {
                ele.nameLanguage = item.data.attribute.nameLanguage || null
              }
            })
          })

          this.vipBtnSetting = ((buttons || []).filter((item) => item.enName === btnType))[0] || {}
          this.currentApproveObj = (approveArr.filter(item => currentNodeTemplateId && currentNodeTemplateId.indexOf(item.id) >= 0))[0]
          // 并行节点可能数据为空，这时候再去logInfo里面查询
          if (!this.currentApproveObj) {
            const approveObj = ((logInfo || []).filter(item => currentNodeTemplateId && currentNodeTemplateId.indexOf(item.nodeTemplateId) >= 0))[0] || {}
            this.currentApproveObj = this.vipJson.cells.filter(item => item.id == approveObj.nodeTemplateId)[0] || {}
          }

          this.unHaveApproveList = []
          let havaSelectIdList = [] // 已经审批和正在审批的id集合
          approveArr.forEach((item) => {
            // 如果外面的节点id包含当前的节点id，就是指向当前审批
            if (currentNodeTemplateId && currentNodeTemplateId.indexOf(item.id) >= 0) {
              havaSelectIdList.push(item.id)
              this.currentApproveObj = item
            } else {
              if (this.haveApproveList.length === 0) {
                // 如果没有已经审批的
                this.unHaveApproveList.push(item)
              } else {
                this.haveApproveList.forEach((ele) => {
                  if (ele.nodeTemplateId === item.id) {
                    havaSelectIdList.push(item.id)
                  }
                })
              }
            }
          })
          this.unHaveApproveList = approveArr.filter((item => !havaSelectIdList.includes(item.id)))
          this.visible = true;
        }
      }
    },

    getNodeData() {
      return this.vipJson.cells
        .filter(item => item.shape === 'approve-node')
        .map((item) => {
          return {
            nodeTemplateId: item.id,
            nodeName: item.data.name
          }
        });
    },

    openTaskAdvancedApprove() {
      this.$refs.taskAdvancedApprove.open();
    },
    
    submit(params) {
      let { approveId, approveRemark, approveAttachments } = this;

      if (this.fromVip) {

        // 所有的审批节点数据
        let vipApproveFlowArr = this.getNodeData()
        const { currentaskId, currentNodeName,  currentNodeTemplateId} = this.approveInfoParams

        let vipParams = {
          id: approveId,
          approveTaskId: currentaskId,
          button: this.btnType,
          applyMessage: approveRemark,
          nodeName: currentNodeName,
          nodeTemplateId: currentNodeTemplateId,
          vipApproveFlow: vipApproveFlowArr,
          attachments: approveAttachments,
          ...params,
        }
        
        let receivers = ''
        let query = ''
        receivers = getReceivers(vipParams.approveRemark, vipParams.atUsers)
        let queryData = {
          receivers,
          tenantId: useTenantId().value,
          content: cutAtTextContent(vipParams.approveRemark),
          sendUserName: useRootUser().value?.displayName,
          bizId: this.approve.objId,
          bizNo: this.taskNo || this.approve.objNo,
          md: this.$t('common.base.task')
        };
        query = '?';
        for (let i in queryData) {
          query += `&${i}=${queryData[i]}`;
        }
        this.pending = true;

        if (this.moduleType === 'project') {
          // 项目管理
          vipParams = {
            ...vipParams,
            module: 'project',
            bizId: this.taskId,
          }
          this.projectApproveSubmit(vipParams)
        } else {
          // 工单审批
          this.taskVipApproveSubmit(vipParams, query)
        }
      }
    },

    // 项目管理高级审批提交
    projectApproveSubmit(vipParams) {
      approveSubmit(vipParams).then((res) => {
        if (res.success) {
          this.$platform.notification({
            type: 'success',
            title: this.$t('task.tip.approveTip5')
          })
          window.location.reload(); // 刷新当前页面
        } else {
          this.$platform.alert(res.message);
          this.pending = false;
        }
      })
    },

    // 工单审批提交接口
    taskVipApproveSubmit(vipParams, query) {
      TaskApi.saveVipApprove(vipParams, query)
        .then((res) => {
        if (res.success) {
          this.$platform.notification({
            type: 'success',
            title: this.$t('task.tip.approveTip5')
          })
          let fromId = window.frameElement.getAttribute('fromid');
          this.$platform.refreshTab(fromId);

          window.location.href = `${this.$resourcePrefix}/task/view/${this.taskId}`;
        } else {
          this.$platform.alert(res.message);
          this.pending = false;
        }
      }).catch((err) => {
        this.pending = false;
      });
    },
    // 处理审批时相关展示的内容
    approveContent() {
      try {
        let otherInfo = this.approve?.otherInfo?.params || {};

        if (this.approve.source == 'task') {
          if (this.approve.action == '指派') {
            if (otherInfo.auto) return this.$t('task.detail.components.autoAllot');
            if (otherInfo.toPool) return this.$t('task.detail.components.publishToTaskPool');

            let executor = JSON.parse(otherInfo.taskJson).executor || {};
            return this.$t('task.detail.components.allotTo') + `${ this.isOpenData ? `<ww-open-data type="userName" openid="${executor.staffId}"></ww-open-data>` : executor.displayName}`;
          }

          if (this.approve.action == '转派') {
            let executor = JSON.parse(otherInfo.taskJson).executor || {};
            return this.$t('task.detail.components.transferTo') + `${ this.isOpenData ? `<ww-open-data type="userName" openid="${executor.staffId}"></ww-open-data>` : executor.displayName}`;
          }

          if (this.approve.action == '完成') {
            return this.$t('task.tip.approveActionTip', {action: this.$t('task.receiptInfo')});
          }

          if (this.approve.action == '结算') {
            return this.$t('task.tip.approveActionTip', {action: this.$t('task.auditSettle')});
          }

          if (this.approve.action == '回访') {
            return this.$t('task.tip.approveActionTip', {action: this.$t('task.customerEvaluation')});
          }

          if (this.approve.action == '暂停') {
            return otherInfo.reason;
          }

          if (this.approve.action == '取消') {
            let content = JSON.parse(otherInfo.contentJson).updateContent;
            return `${content}`;
          }

          return '';
        }

        if (this.approve.source == 'event') {
          if (this.approve.action == '分配') {
            return this.$t('task.detail.components.assignTo') + `${ this.isOpenData ? `<ww-open-data type="userName" openid="${otherInfo.executorStaffId}"></ww-open-data>` : otherInfo.executorName}`;
          }

          if (this.approve.action == '完成') {
            return this.$t('task.tip.approveActionTip', {action: this.$t('task.detail.components.receiptTemporarySaveContent')});
          }

          if (this.approve.action == '暂停') {
            return otherInfo.reason;
          }

          return '';
        }
      } catch (err) {
        console.error('approveContent error', err);
      }
    },
    head(src) {
      if (!src) return defaultAvatar
      return src
    },
    inputContent(event){
      let value = event.target.value;
      this.approveRemark = value;
    },
    // 获取action的多语言label
    getActionLabel(key) {
      if(this.customNodeTitle) return this.customNodeTitle

      return ApproveActionLabelEnum[key] || key
    },
  }
}
</script>

<style lang="scss">
.task-approve-dialog {

  .approve-attach {
    margin-top: 4px;
  }

  
  .form-view-row {
    padding: 6px 0px;
    label{
      min-width: 84px;
      text-align: left;
    }

    .result-content {
      height: 24px;
      overflow-y: hidden;
    }
  }

  .dialog-footer {
    text-align: left;
    display: flex;
    flex: 1;

    .dialog-footer-left {
      flex: 1;
      font-size: 12px;
    }

    .dialog-footer-right {
      text-align: right;
    }
  }
}
   
</style>

<style lang="scss" scoped>
.dividing-line{
  margin: 8px 0;
  width: calc(100% + 38px);
  border-top: 1px #ddd dashed;
  transform: translateX(-20px);
}
.approve-source {
    font-size: 14px;
    color: #262626;
    padding-left: 12px;
  }
.tips {
  margin-bottom: 0!important;
  margin-top: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.go-approve-detail {
  color: $color-primary-light-6;
  text-decoration: underline;
}
.approve-reason-new {
  margin-left: 108px;
  margin-right: 20px;
  border-radius: 4px;
  background-color: #f5f5f5;
  padding: 8px 0;
  .reason-label {
    width: 72px;
  }
}
.approve-steps{
  padding-top: 20px;
  .approve-step-item{
    color: #000000;
   
    .approve-attach {
      margin-top: 6px;
    }
    h2{
      font-size: 14px;
      color: #262626;
      &.pass span{
        color: #52C41A;
      }
    }
    &-desc{
      padding: 12px;
      background: #FAFAFA;
    }
  }
}
.agree {
  color: #52C41A;
}
.refuse {
  color: #f56c6c;
}
.approve-step-item-desc {
  background-color: #fff !important;
  padding: 0px !important;
  word-break: break-all;
}
.stepCicle {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.timeOver {
  background-color: $color-primary;
}
.signature {
  background-color: #FAAB0C;
}
.comingSoon {
  background-color: #E4E7ED;
}
::v-deep .is-text {
  border: 0px !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
::v-deep .el-step__icon {
  height: 15px !important;
}
::v-deep .el-step__head {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 1px; /* 虚线的宽度 */
    height: 100%;
    background: linear-gradient(
     to bottom,
     #ccc 50%,
     transparent 50%
    ); /* 虚线的颜色和间隔设置 */ 
    background-size: 100% 10px;  /* 虚线宽度为1px虚线的高度的间隔为10px*/
    transform: translateX(-50%); /* 将中点调整到元素中心 */
   }
}
::v-deep .el-step:last-child .el-step__head::after {
  content: none;
}
::v-deep .el-step__line {
  width: 0px !important;
  position: relative;
}
::v-deep .el-row  {
  h2 {
    font-size: 14px;
  }
}
// element-ui
::v-deep .el-step__main{
  margin-bottom: 20px;
}
::v-deep .el-step__description{
  color: #000000;
  padding: 0
}
::v-deep .is-justify-space-between {
  color: black;
}
.form-view-row {
  padding-top: 6px;
  padding-bottom: 6px;
}
.form-view-row-approval-results {
  align-items:flex-start;
  ::v-deep .form-view-row-content {
    overflow-y: inherit;
    overflow-x: inherit;
  }

}
.signature-img {
  width: 200px;
  height: auto;
}
</style>
